<template>
    <div>
          <h1>会员信息显示</h1>
          <a href="/">会员信息新增</a>
          <br>
          <table class="table">
            <thead>
                 <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>邮箱</td>
                    <td>头像</td>
                    <td>状态</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>删除</td>
                    <td>详情</td>
                 </tr>
            </thead>
            <tbody>
                <tr v-for="e in data">
                    <td>{{ e.id }}</td>
                    <td>{{ e.name }}</td>
                    <td>{{ e.phone }}</td>
                    <td>{{ e.youxiang }}</td>
                    <td>{{ e.img }}</td>
                    <td>{{ e.state?'启用':'禁用' }}</td>
                    <td>{{ e.sex==1?'男':'女' }}</td>
                    <td>{{ e.age }}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="deletemem(e.id)">
                    </td>
                    <td>
                        <input type="button" value="详情" @click="xq(e.id)">
                    </td>
                 </tr>
            </tbody>
          </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router=useRouter();

onMounted(()=>{
    show();
})
//详情
const xq =(val:any)=>{
    if(!confirm("确认查看详情吗"))
{
 return;
}
    router.push({path:"/xiangq",query:{id:val}})
} 
//删除
const deletemem=(val:any)=>{
    if(!confirm("确认逻辑删除吗"))
{
 return;
}
    axios.delete("https://localhost:7175/api/Member/DeleteMember",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
         alert("逻辑删除成功");
         
         show();
    }
    else{
        alert("逻辑删除失败");
        return;
    }
    })
}


const data=ref([{
    "id": 1,
    "name": "string",
    "phone": "string",
    "youxiang": "string",
    "img": "string",
    "state": true,
    "sex": 0,
    "age": 0,
    "dateMember": "2025-04-23T09:42:42.7827286",
    "isDelete": true
  }])

const show=()=>{
    axios.get("https://localhost:7175/api/Member/ShowMember",{params:data.value}).then(res=>{
        data.value=res.data;
    })
}


</script>

<style scoped>

</style>